<template>
  <div class="qr_code_login_box">
    <Loading style="height: 100%" :loading="loading">
      <div class="background_color">
        <div>
          <img :src="qrCodeImg" style="width: 200px;" />
          <div class="qr_code_login_notice">
            <div>请使用APP扫码登陆</div>
            <div v-if="qrTimeout > 0">将于{{qrTimeout}}秒后失效</div>
            <div v-else>
              <a @click="handleFlushQrCode">点击刷新</a>
            </div>
          </div>
        </div>
      </div>
    </Loading>
  </div>
</template>

<script>
import QrCode from "qrcode";
import config from "@/utils/config";
import Uuid from "uuid";
import Loading from "@/components/Loading";
export default {
  props: {
    signInType: {
      type: String,
      default: "normal",
      required: false
    },
    clientId: {
      type: String,
      required: false
    }
  },
  event: ["onSignInSuccess"],
  components: {
    Loading
  },
  data: function() {
    return {
      qrCodeImg: "",
      qrTimeout: 0,
      loading: false,
      ws: null
    };
  },
  beforeMount: function() {
    this.createWebSocket();
  },
  beforeDestroy() {
    this.ws.close();
  },
  methods: {
    createWebSocket() {
      let vm = this;
      let terminalId = Uuid.v1();
      let ws = new WebSocket(
        `${config.webSocketProtocol}://${config.serverHost}:${config.serverPort}${config.authServicePath}/ws/auth/login/${terminalId}`
      );
      vm.ws = ws;
      ws.onopen = function() {
        console.log("ws login open");
      };
      ws.onmessage = function(e) {
        let data = JSON.parse(e.data);
        if (data.type === "generateCode") {
          vm.generateQrCodeImg(data);
        } else if (data.type === "scanSuccess") {
          vm.scanSuccess(data);
        } else if (data.type === "signInSuccess") {
          vm.handleSignInSuccess(data);
        }
      };
      ws.onclose = function(e) {
        console.log("ws login close");
      };
      ws.onerror = function(e) {
        console.log("ws login error" + e);
      };
    },
    handleFlushQrCode() {
      this.createWebSocket();
    },
    generateQrCodeImg(data) {
      let qrCode = data.qrCode;
      let appUrl = `${config.uiPath}${config.baseRoute}appQrCodeSignIn?qrCode=${qrCode}&signInType=${this.$props.signInType}&clientId=${this.$props.clientId}`;
      console.log(appUrl);
      let vm = this;
      QrCode.toDataURL(appUrl, function(err, imageUrl) {
        vm.qrCodeImg = imageUrl;
      });
      this.qrTimeout = data.timeout;
      let handle = window.setInterval(() => {
        if (this.qrTimeout > 0) {
          this.qrTimeout = this.qrTimeout - 1;
        } else {
          this.ws.close();
          this.qrCodeImg =
            "https://manager-1254950508.cosgz.myqcloud.com/20240407211300393b82bc0-78d1-11ea-899d-9d9eebc6f3f4.png";
          window.clearInterval(handle);
          this.loading = false;
        }
      }, 1000);
    },
    scanSuccess(data) {
      this.loading = true;
    },
    handleSignInSuccess(data) {
      this.$emit("onSignInSuccess", data);
    }
  }
};
</script>
<style lang="less" scoped>
.qr_code_login_box {
  width: 100%;
  height: 100%;
  .background_color {
    height: 100%;
    background-color: rgba(245, 245, 245, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    .qr_code_login_notice {
      text-align: center;
      padding-top: 20px;
      transform-origin: 76.5px 28px 0px;
      font-weight: 400;
      font-style: normal;
      font-size: 20px;
    }
  }
}
</style>
